<template>
  <div>
    <el-card style="height: 600px;overflow-y:hidden;box-shadow: 0 0 0 0 ">
      <template #header>
        <div  class="card-header">
          <i v-if="!refresh" @click="refreshComment" class="el-icon-refresh refresh" />
          <i v-if="refresh" class="el-icon-loading" />
          <span> 总评论数：{{commentTotal}}<br/><br/>
          <el-input style="width: 150px;margin-right: 5px"
                    autosize type="textarea" maxlength="100"
                    v-model="commentContent" placeholder="请输入评论" show-word-limit >
             </el-input>
            <el-button @click="publishComment" type="small">发表</el-button>
            </span>
          <span>
          </span>
        </div>
      </template>
      <div v-if="commentTotal<1">
          <h4>暂无评论。。。</h4>
      </div>
      <div v-else>
      <div  style="height: 400px;overflow-y:scroll">
        <!--        评论显示-->
        <div v-for="comment in commentList" :key="comment.commentId">
          <el-row class="el-row">
            <div class="userPhoto">
              <el-avatar :size="25" :src=comment.userPhoto></el-avatar>
              <router-link :to="'/user/info/'+comment.commentUserId">
                <template>
                  {{comment.userPet}}
                  <button v-if="comment.commentUserId===commentUserId" class="owner">作者</button>
                </template>
              </router-link>
              <el-button v-if="commentUserId===$store.state.user.id || $store.state.user.roles.indexOf('admin')!==-1"
                         @click="deleteCom(comment.commentId)"
                         style="float: right" type="small">删除
              </el-button>
            </div>
          </el-row>
          <el-row class="el-row">{{comment.commentContent}}</el-row>
          <el-row style="color: #9ac8e2">
            {{comment.commentTime}}
            <el-button
              @click="replayTCom(-comment.commentId-1000000)" class="" type="text">回复</el-button>
          </el-row>
          <!--        评论的回复-->
          <el-row class="show" :id="-comment.commentId-1000000">
            <el-input style="width: 200px;margin-right: 5px"
                      autosize type="textarea" maxlength="100"
                      v-model="replayContent"
                      :placeholder="'@'+comment.userPet"
                      show-word-limit >
            </el-input><br/>
            <el-button
              @click="publish(comment.commentUserId, replayContent, comment.commentId)"
              style="font-size: 10px" type="text">发表</el-button>
            <el-button @click="cancelReplay(-comment.commentId-1000000)"
                       style="font-size: 10px" type="text">取消</el-button>
          </el-row>

          <!--        评论回复显示-->
          <el-row v-if="comment.replayCount>0" class="el-row">
            <el-button :id="comment.commentId"
                       type="text"
                       @click="openReplayList
                   (comment.commentId,-comment.commentId)"
                       class="open">
              查看全部{{comment.replayCount}}条评论<i class="el-icon-arrow-down" />
            </el-button>

            <div class="show" :id="-comment.commentId">
              <!--            遍历回复表-->
              <el-col :offset="2">
                <div v-for="replay in replayComment" :key="replay.id">
                  <!--              如果评论id等于回复的父评论id就显示-->
                  <div v-if="comment.commentId===replay.parentId">
                    <!--                涉及到两个路由跳转，均是跳转到个人信息页面-->
                    <el-row  class="replay">

                      <el-avatar :size="20" :src=replay.userPhoto></el-avatar>
                      <router-link class="replayPet" :to="'/user/info/'+replay.userId">
                        {{replay.userPet}}
                        <!--                    判断是否是文章作者-->
                        <button v-if="replay.userId===commentUserId" class="owner">作者</button>
                      </router-link>
                      <!--                  当回复的评论不是给楼主的时候-->
                      <template v-if="replay.replayUserId!==comment.commentUserId">
                        回复：
                        <router-link class="replayUser" :to="'/user/info/'+replay.replayUserId">
                          @{{replay.rePlayUserPet}}
                        </router-link>
                      </template>

                    </el-row>
                    <el-row>{{replay.replayContent}}</el-row>
                    <el-row style="color: #8da3ea">
                      {{replay.replayTime}}
                      <el-button
                        @click="replayTCom(replay.id+1000000)"
                        style="font-size: 10px" type="text">回复
                      </el-button>
                    </el-row>
                    <!--                回复-->
                    <el-row class="show" :id="replay.id+1000000">
                      <el-input style="width: 200px;margin-right: 5px"
                                autosize type="textarea"
                                minlength="1" maxlength="100"
                                v-model="replayContent"
                                :placeholder="'@'+replay.userPet"
                                show-word-limit >
                      </el-input><br/>
                      <el-button
                        @click.prevent="publish(replay.userId, replayContent, comment.commentId)"
                        style="font-size: 10px" type="text">发表</el-button>
                      <el-button @click="cancelReplay(replay.id+1000000)"
                                 style="font-size: 10px" type="text">取消</el-button>
                    </el-row>
                  </div>

                </div>

                <el-pagination v-if="comment.replayCount>3"  :current-page.sync="currentPage"
                               :page-size="3"
                               small layout="prev, pager, next"
                               :total="comment.replayCount" @current-change="getReplays(comment.commentId)"/>
              </el-col>
              <el-button type="text"
                         @click="closeReplayList(comment.commentId,-comment.commentId)"
                         class="open">
                收起全部{{comment.replayCount}}条评论<i class="el-icon-arrow-up" />
              </el-button>

            </div>
          </el-row>
        </div>

      </div>
      <template>
        <el-pagination v-if="commentTotal>4" :current-page.sync="ParentCurrent"
                       :page-size="4"
                       small layout="prev, pager, next"
                       @current-change="getComments()"
                       :total="commentTotal"> </el-pagination>
      </template>
      </div>
    </el-card>

  </div>
</template>

<script>
import Sticky from "@/components/Sticky";
import {getCommentByArticleId, getReplayByParentId, PublishComment,PublishReplay,deleteComment} from "@/api/attach";

export default {
  name: "AllComments",
  components: {Sticky},
  props:{
    commentUserId:{
      type:String,
      default:''
    },
    articleId:{
      type:Number,
      default: 0
    }
  },
  data(){
    return{
      //刷新
      refresh:false,
      //总评论数
      commentTotal:0,
      //回复当前页
      currentPage:1,
      //评论当前页
      ParentCurrent:1,
      //文章id(监视属性)
      getArticleId:0,
      //dom节点display:none，用来关闭上一次打开的回复input输入框
      lastNum:0,
      //dom节点display:none，用来关闭上一次打开回复详情
      lastNum2:0,
      lastNum3:0,
      //评论内容
      commentContent:'',
      //回复内容
      replayContent:'',
      //评论列表
      commentList:[
        {
          commentArticleId:0,
          commentContent:'',
          commentId: 0,
          commentTime: '',
          commentUserId:'',
          replayCount: 0,
          userPet: '',
          userPhoto:''
        }
      ],
      replayComment:[
        {
          id:0,
          replayContent:'',
          userId:'',
          userPhoto:'',
          userPet:'',
          replayUserId:'',
          rePlayUserPet:'',
          replayTime:'',
          parentId:0
        }
      ]
    }
  },
  watch:{
    articleId(newVal){
      this.getArticleId=newVal
      this.getComments(this.getArticleId)
    }
  },

  methods:{
    //获取当前文章所有评论
    getComments(articleId){
      this.refresh=!this.refresh
      setTimeout(() =>{
        getCommentByArticleId(articleId===undefined ? this.articleId : articleId, this.ParentCurrent,4)
        .then(res =>{
          if (res.data===null)
          {
            this.commentTotal = 0
            this.refresh=!this.refresh
            return
          }
          this.commentList=res.data.comments
          this.commentTotal=res.data.count
          this.lastNum=0
          this.lastNum2=0
          this.lastNum3=0
          this.refresh=!this.refresh
        })
        .catch(error =>{
          console.log(error);
        })
      },300)

    },
    //获取当前评论所有的回复
    getReplays(commentId){
      getReplayByParentId(commentId,this.currentPage,3)
        .then(res =>{
          this.replayComment=res.data.replays
          this.replayContent=''
        })
      .catch(error =>{
        console.log(error)
      })
    },
    //发表评论
    publishComment(){
      if (this.commentContent===''){
        this.$message({
          type:'warning',
          message:'内容不能为空'
        })
        return
      }
      PublishComment(
        this.$store.state.user.id,
        this.articleId,
        {commentContent:this.commentContent})
        .then(res =>{
          this.$message({
            type:'success',
            message:'评论发表成功'
          })
          this.getComments(this.articleId)
        })
        .catch(error =>{
          console.log(error)
          this.$message({
            type:'error',
            message:'评论失败，请检查您的网络环境'
          })
        })
    },
    //发表回复
    publish(BeReplayUserId,replayContent,commentId,num){
      console.log(num)
      if (replayContent===''){
        this.$message({
          type:'warning',
          message:'内容不能为空'
        })
        return
      }
      const docu=document.getElementById((-commentId-1000000).toString())
        if(docu!==null)
      docu.style.display='none'
      PublishReplay(this.$store.state.user.id,BeReplayUserId,commentId,{replayContent:replayContent})
      .then(res =>{
        this.$message({
          type:'success',
          message:'回复成功'
        })
        this.getReplays(commentId)
        this.getComments(this.articleId)
      })
      .catch(error =>{
        this.$message({
          type:'error',
          message:'回复失败，请检查网络'
        })
      })
    },
    //取消回复评论
    cancelReplay(replayId){
      document.getElementById(replayId).style.display='none'
      this.replayContent=''
    },
    //回复评论
    replayTCom(replayId){
      if (this.lastNum!==0)
        document.getElementById(this.lastNum).style.display='none' ||'inline'
      document.getElementById(replayId).style.display='inline' ||'none'
      this.lastNum=replayId
      this.replayContent=''
    },

    //打开回复列表
    openReplayList(commentId,NeCommentId){
      if (this.lastNum2!==0&&this.lastNum3!==0)
        this.closeReplayList(this.lastNum2,this.lastNum3)
      document.getElementById(commentId).style.display='none'
      document.getElementById(NeCommentId).style.display='inline'
      this.currentPage=1
      this.getReplays(commentId)
      this.lastNum2=commentId
      this.lastNum3=NeCommentId
    },
    //关闭评论列表
    closeReplayList(commentId,NeCommentId){
      document.getElementById(commentId).style.display='inline'
      document.getElementById(NeCommentId).style.display='none'
      this.replayComment=[{id:0, replayContent:'', userId:'', userPhoto:'',
        userPet:'', replayUserId:'', rePlayUserPet:'', replayTime:'', parentId:0}]
    },
    //删除评论
    deleteComments(commentId){
      deleteComment(commentId)
        .then(res =>{
        this.$message({
          type:'success',
          message:'删除评论成功'
        })
          this.getComments(this.articleId)
      })
      .catch(error =>{
        console.log(error)
        this.$message({
          type:'error',
          message:'删除评论失败，请检查您的网络'
        })
      })
    },
    deleteCom(commentId){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.deleteComments(commentId)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    refreshComment(){
        this.getComments()
      this.ParentCurrent=1
    }
  }
}

</script>

<style lang="scss" scoped>
.owner{
  font-family: "黑体", Arial, sans-serif;
  border: none;
  font-size: 10px;
  text-align: center;
  border-radius: 5px;
  background-color:coral;
  color: white;
  &:hover{
    cursor:pointer;
    background-color: chocolate;
  }
}
.replayUser:hover{
  color: coral;
}
.replayPet:hover{
  color: coral;
}
.userPhoto{
  font-size: 15px;
  font-family: "黑体", Arial, sans-serif;
  color: tomato;
  &:hover{
    color: #DB7D74;
  }
}
.replay{
  font-size: 13px;
  font-family: "黑体", Arial, sans-serif;
  color: chocolate;
}
.el-row{
  margin-bottom: 10px;
}
.show{
  display: none;
}
::-webkit-scrollbar{
  width: 5px;
  height: 10px;
}
::-webkit-scrollbar-thumb{
  border-radius: 3px;
  background-color: #dbd9d9;
}
.refresh{
  color: #e799b0;
  &:hover{
    cursor:pointer;
    color: #9ac8e2;
  }
}
</style>
